import { LeftOutlined } from '@ant-design/icons';
import { ProBreadcrumb, RouteContext } from '@ant-design/pro-layout';
import { Col, Row, Space } from 'antd';
import { Link, useHistory } from 'react-router-dom';

export default () => {
  const history = useHistory();
  return (
    <Space align='center' style={{ height: '100%', marginLeft: 10 }}>
      <RouteContext.Consumer>
        {(context) => {
          const rs = context.breadcrumb?.routes;
          return rs && rs.length > 2 ? (
            <LeftOutlined
              onClick={() => {
                if (rs && rs.length > 2) history.push(rs[rs.length - 2].path);
              }}
            />
          ) : undefined;
        }}
      </RouteContext.Consumer>
      <ProBreadcrumb
        itemRender={(r, p, rs) => {
          // 第一个和最后一个不加链接
          if (r.path === rs[0].path || r.path === rs[rs.length - 1].path) {
            return <span>{r.breadcrumbName}</span>;
          }
          return <Link to={r.path}>{r.breadcrumbName}</Link>;
        }}
      />
    </Space>
  );
};
